<template>
  <div class="app-container">
    <basic-container>
      <avue-crud ref="crud" v-model="custlForm" :page="custlPage" :data="tableData" :option="tableOption" @search-change="searchChange" :table-loading="custlLoading" @on-load="getList" @refresh-change="refreshChange" @row-del="rowDel">
        <template slot="zhanshitpid" slot-scope="scope">
          <el-button @click="showImgPath(scope.row)">查看</el-button>
        </template>
        <template slot-scope="scope" slot="menuLeft">
          <el-button icon="el-icon-plus" size="small" type="primary" @click="addCust">新增</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button @click="rowEdit(scope.row)" icon="el-icon-edit" size="small" type="primary">编辑</el-button>
          <el-button @click="rowDel(scope.row)" icon="el-icon-delete" size="small" type="danger">删除</el-button>
          <el-button @click="rowJktj(scope.row)" icon="el-icon-edit" size="small" type="primary">健康体检</el-button>
        </template>
        <template slot-scope="scope" slot="flag">
          <el-tag v-if="Number(scope.row.flag)===0" type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===1" type="warning">{{scope.label}}</el-tag>
        </template>
      </avue-crud>

      <!-- 创建档案 -->
      <el-dialog title="创建档案" :visible.sync="addFormVisible">
        <el-form ref="searchFrom" class="searchFrom" v-model='addForm' label-width="80px">
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input placeholder="请输入姓名" v-model="addForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input placeholder="请输入身份证号" v-model="addForm.sfzh"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item label="出生日期">
                <el-date-picker placeholder="出生日期" v-model="addForm.csrq"></el-date-picker>
                <!-- <el-date-picker type="date" placeholder="出生日期" v-model="addForm.csrq" disabled></el-date-picker> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="本人电话">
                <el-input placeholder="本人电话" v-model="addForm.brdh"></el-input>
                <!-- <el-date-picker type="date" placeholder="出生日期" v-model="addForm.csrq" disabled></el-date-picker> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add()">添加</el-button>
        </span>
      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
//import { isPhone } from '@/util/validate'
import { setStore } from '@/util/store'
import { addObj, delObj } from '@/api/cust/base'
import { fetchList } from '@/api/cust/list'
export default {
  name: 'crud',
  data() {
    // var validatePass = (rule, value, callback) => {
    //   if (!isPhone(value)) {
    //     callback(new Error('请输入正确号码'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      url: [],
      addFormVisible: false,
      custlForm: {},
      addForm: {},
      custlLoading: false,
      custlPage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      cust: [
        {
          name: '王桂兰',
          sfzh: '37072119886532545',
          xb: '1',
          brdh: '18666966696',
          jkdnxzz: '潍坊市人民政府',
          jdr: '张家界',
          zrys: '王聚聚'
        }
      ],
      tableOption: {
        index: true,
        border: true,
        stripe: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        maxHeight: 400,
        menuWidth: 350,
        menu: true,
        indexLabel: '序号',
        align: 'center',
        column: [
          {
            label: '姓名',
            size: 'small',
            search: true,
            prop: 'name'
          },
          {
            label: '身份证号',
            size: 'small',
            prop: 'sfzh',
            width: 150,
            search: true,
            overHidden: true
          },
          {
            label: '性别',
            size: 'small',
            type: 'select',
            prop: 'xb',
            dicData: [
              {
                label: '男',
                value: '1'
              },
              {
                label: '女',
                value: '2'
              }
            ]
          },
          {
            label: '本人电话',
            size: 'small',
            prop: 'brdh',
            search: true,
            align: 'center'
          }
        ]
      },
      tableData: []
    }
  },
  created() {
    this.getList(this.custlPage)
  },
  mounted: function() {},
  computed: {},
  methods: {
    //搜索
    searchChange(params) {
      this.searchform = params
      this.getList(this.custlPage, params)
    },
    getList(page, params = {}) {
      this.custlLoading = true
      fetchList(
        Object.assign(params, {
          start: (page.currentPage - 1) * page.pageSize,
          length: page.pageSize
        })
      ).then(res => {
        this.custlLoading = false
        this.custlPage.total = res.data.recordsTotal
        this.tableData = res.data.data
      })
    },

    refreshChange() {
      this.getList(this.custlPage)
      this.$message({
        showClose: true,
        message: '刷新成功',
        type: 'success'
      })
    },
    rowDel(row) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delObj(row.id).then(() => {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            })
            this.getList(this.custlPage)
          })
        })
        .catch(function() {})
    },
    rowEdit(row) {
      setStore({ name: 'cust', content: row })
      this.$router.push({
        path: `/cust/header`,
        query: {
          custId: row.id,
          custName: row.name
        }
      })
    },
    //跳转健康体检页面
    rowJktj(row) {
      setStore({ name: 'cust', content: row })
      this.$router.push({
        path: `/cust/jkdn`,
        query: { grjbxxid: row.id }
      })
    },
    addCust() {
      setStore({ name: 'cust', content: {} })
      this.$router.push({
        path: `/cust/header/`
      })
      // this.addForm = {}
      // this.addFormVisible = true
    },
    add() {
      this.addFormVisible = false
      addObj(this.addForm).then(res => {
        setStore({ name: 'cust', content: res.data })
        this.addFormVisible = false
        this.$router.push({
          path: `/cust/header/`,
          query: {
            custId: res.data.id,
            name: res.data.name
          }
        })
      })
      return
    }
  }
}
</script>